<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <div class="flex items-center mb-1">
                <div class="font-medium mr-2 w-20">短信通知</div>
                <el-switch v-model="sms_open" @change="smsChange" />
            </div>
            <div class="flex">
                <div class="font-medium mr-2 w-20">接收人</div>
                <el-input
                    class="mb-1"
                    v-model="phone_list"
                    style="width: 480px"
                    :autosize="{ minRows: 3, maxRows: 10 }"
                    type="textarea"
                    placeholder="请输入手机号，多个手机号用英文的  ； 隔开"
                />
            </div>
            <div class="mb-10">
                <div class="flex">
                    <div class="w-20 mr-2"></div>
                    <div>
                        <div class="text-xs mb-1">请输入手机号，多个手机号用英文的  ； 隔开</div>
                        <el-button type="primary" @click="editPhone">修改</el-button>
                    </div>
                    
                </div>
               
            </div>
            <div class="flex items-center mb-20">
                <div class="font-medium mr-2 w-20">站内通知</div>
                <el-switch v-model="in_station_open" @change="stationChange" />
            </div>
            <div class="flex items-center">
                <div class="font-medium mr-2 w-20">客户端通知</div>
                <el-switch v-model="client_open" @change="clientChange" />
            </div>
            
            
            
        </el-card>
    </div>
</template>
<script setup lang="ts" name="pushNotice">
import { getMyInfo, setValue } from '@/api/demand/lists';
import feedback from '@/utils/feedback'
const sms_open = ref(false)
const in_station_open = ref(false)
const client_open = ref(false)
const phone_list = ref('')

// 去除空格
const trimAll = (ele: string) => {
    if(typeof ele === 'string'){
        return ele.split(/[\t\r\f\n\s]*/g).join('');
    }else{
        console.error(`${typeof ele} is not the expected type, but the string type is expected`)
    }
}
const phoneValidator = (val: string) => {
    return /^1[3456789]\d{9}$/.test(val);
}

const editPhone = async () => {
    // console.log(phone_list.value)
    let str = trimAll(phone_list.value)
    // console.log(str);
    str = str?.replace(/；/g,';')
    // console.log(str)
    let str_arr = str?.split(';') || []
    // console.log(str_arr)
    let stop = false;
    str_arr.forEach((item)=>{
        if (!phoneValidator(item) && item != '') {
            stop = true
        }
    })
    // console.log(stop)
    if (stop) {
        return feedback.msgError('请检查并输入正确的手机号');
    }
    // console.log('通过')
    await setValue({
        phone_list: str
    })
    getInfo()
}

const smsChange = async (e: any) => {
    console.log(e)
    await setValue({
        sms_open: e ? 1: 0
    })
    getInfo()
}
const stationChange = async (e: any) => {
    console.log(e)
    await setValue({
        in_station_open: e ? 1: 0
    })
    getInfo()
}
const clientChange = async (e: any) => {
    console.log(e)
    await setValue({
        client_open: e ? 1: 0
    })
    getInfo()
}

const getInfo = async () => {
    const res = await getMyInfo({})
    console.log(res)
    sms_open.value = res.sms_open == 1 ? true : false;
    in_station_open.value = res.in_station_open == 1 ? true : false;
    client_open.value = res.client_open == 1 ? true : false;
    phone_list.value = res.phone_list.replace(/,/g,';');
}
getInfo()

</script>